<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SYYYY</title>
    <link rel="stylesheet" href="旋转木马.css">
</head>

<body>
    <div class="main">
        <div class="box" style="transform: rotateY(0deg)">
            <img src="img/1.jpg" alt="jpg" class="picture" style="transform: rotateY(40deg) translateZ(200.923px)">
            <img src="img/2.jpg" alt="jpg" class="picture" style="transform: rotateY(80deg) translateZ(200.923px)">
            <img src="img/3.jpg" alt="jpg" class="picture" style="transform: rotateY(120deg) translateZ(200.923px)">
            <img src="img/5.jpg" alt="jpg" class="picture" style="transform: rotateY(160deg) translateZ(200.923px)">
            <img src="img/6.jpg" alt="jpg" class="picture" style="transform: rotateY(200deg) translateZ(200.923px)">
            <img src="img/9.jpg" alt="jpg" class="picture" style="transform: rotateY(240deg) translateZ(200.923px)">
            <img src="img/10.jpg" alt="jpg" class="picture" style="transform: rotateY(280deg) translateZ(200.923px)">
            <img src="img/11.jpg" alt="jpg" class="picture" style="transform: rotateY(320deg) translateZ(200.923px)">
            <img src="img/13.jpg" alt="jpg" class="picture" style="transform: rotateY(360deg) translateZ(200.923px)">
        </div>
    </div>
    <script tyle='text/javascript'>
    var box = document.getElementsByClassName('box')[0];

    box.onclick = function(e) {
        //this.style.rotateY=parseInt(this.style.rotateY)+60+'deg';
        var reg = /\d{1,}/;
        var num = this.style.transform.toString().match(reg)[0];
        console.log(num);
        num = parseInt(num) + 40;
        this.style.transform = 'rotateY(' + num + 'deg)';
    }
    </script>
</body>

</html>